<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
  >
    <path
      :stroke="active ? activeColor : inactiveColor"
      :style="style"
      stroke-width="1.5"
      stroke-linejoin="round"
      stroke-linecap="round"
      d="M11 5.1L20.17 5.1"
    ></path>
    <path
      d="M11 8.14C11 9.90003 11.44 10.34 13.22 10.34L18.78 10.34C20.56 10.34 21 9.90003 21 8.14L21 4.03001C21 2.26997 20.56 1.83 18.78 1.83L13.22 1.83C11.44 1.83 11 2.26997 11 4.03001L11 8.14Z"
      :stroke="active ? activeColor : inactiveColor"
      :style="style"
      stroke-width="1.5"
      stroke-linejoin="round"
    ></path>
    <path
      :stroke="active ? activeColor : inactiveColor"
      :style="style"
      stroke-width="1.5"
      stroke-linejoin="round"
      stroke-linecap="round"
      d="M1.83002 15.64L11 15.64"
    ></path>
    <path
      d="M1.83002 18.69C1.83002 20.45 2.27002 20.89 4.05002 20.89L9.61002 20.89C11.39 20.89 11.83 20.45 11.83 18.69L11.83 14.58C11.83 12.82 11.39 12.38 9.61002 12.38L4.05002 12.38C2.27002 12.38 1.83002 12.82 1.83002 14.58L1.83002 18.69Z"
      :stroke="active ? activeColor : inactiveColor"
      :style="style"
      stroke-width="1.5"
      stroke-linejoin="round"
    ></path>
    <path
      :stroke="active ? activeColor : inactiveColor"
      :style="style"
      stroke-width="1.5"
      stroke-linejoin="round"
      stroke-linecap="round"
      d="M20.75 13.75C20.75 17.62 17.62 20.75 13.75 20.75L14.8 19"
    ></path>
    <path
      :stroke="active ? activeColor : inactiveColor"
      :style="style"
      stroke-width="1.5"
      stroke-linejoin="round"
      stroke-linecap="round"
      d="M1.83002 8.83C1.83002 4.95998 4.96 1.83 8.83002 1.83L7.78002 3.58"
    ></path>
    <g opacity="0.0001"></g>
  </svg>
</template>

<script>
  import config from './config' // 导入配置文件
  const { transionDuration, activeColor, inactiveColor } = config

  export default {
    name: 'promotion-svg',
    props: {
      active: { default: false },
      transiton: {
        type: Number,
        default: transionDuration,
      },

      activeColor: {
        type: String,
        default: activeColor,
      },
      inactiveColor: {
        type: String,
        default: inactiveColor,
      },
    },
    computed: {
      style() {
        return { transition: `stroke ${this.transiton}s ease` }
      },
    },
  }
</script>

<style lang="scss" scoped></style>
